<template>
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="handleUploadImage"
        :before-upload="beforeAvatarUpload" :limit="1" :disabled="disabled">
        <div v-for="item of imageShowList.value" :key="item" :style="{ width: props.width + 'px', height: props.height + 'px' }">
            <img style="width:100%;height:100%;" :src="item" class="avatar" />
        </div>
        <el-icon v-if="imageShowList.value.length < props.fileCount" class="avatar-uploader-icon"
            :style="{ width: props.width + 'px', height: props.height + 'px' }">
            <Plus />
        </el-icon>
    </el-upload>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import { uploadFile } from '/@/api/index'

import type { UploadProps } from 'element-plus'

const props = defineProps({
    modelValue: {
        type: String,
        default: () => '',
    },
    fileCount: {
        type: Number,
        default: () => 1
    },
    width: {
        type: Number,
        default: () => 150
    },
    height: {
        type: Number,
        default: () => 150
    },
    disabled: {
        type: Boolean,
        default: () => false
    },
    bucket: {
        type: String,
        default: () => ''
    }
});

const emit = defineEmits(["update:modelValue"])

const imageShowList = ref<any>([])

imageShowList.value = computed(() => {
    let urls = [];
    if (props.modelValue) {
        let arr = props.modelValue.split(',');
        for (let item of arr) {
            if (item) {
                urls.push(import.meta.env.VITE_MINIO_API_URL + item);
            }
        }
    }
    return urls
})

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('图片格式不正确!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片尺寸不能大于2M!')
        return false
    }
    return true
}

const handleUploadImage = async (param: any) => {
    let formData = new FormData();
    formData.append("file", param.file);
    formData.append('bucket', props.bucket)
    const rest = await uploadFile(formData);
    if (rest && rest.code === 0) {
        const data = rest.data;
        const arr = props.modelValue ? props.modelValue.split(',') : [];
        arr.push(data.fileUrl)
        ElMessage.success('上传成功！');
        emit('update:modelValue', arr.join(','))
    } else {
        ElMessage.error('上传失败！');
    }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
